<template>
	<view class="supplyRelease">
		<h5_header>发布采购</h5_header>
		<view class="main">
			<view class="main_top">
				<view class="main_item">
					<h1>产品名称：</h1>
					<view class="main_info">
						<input type="text" placeholder-class="placeholder-class" maxlength="15" v-model="form.title" placeholder="如：采购猪六分体，牛上脑等" />
					</view>
				</view>
				<view class="main_item">
					<h1>产品分类：</h1>
					<picker @change="onConfirm1" mode="selector" :value="categoryStu" :range="categoryList">
						<view class="main_info">
							<input placeholder-class="placeholder-class" type="text" v-model="form.goodsCategory" placeholder="请选择产品分类"
							 disabled />
							<i></i>
						</view>
					</picker>
				</view>
				<view class="main_item">
					<h1>产品要求：</h1>
					<picker @change="onSelect1" mode="multiSelector" range-key="name" :value="typeShow" :range="typeList">
						<view class="main_info">
							<input placeholder-class="placeholder-class" type="text" v-model="typeName" placeholder="请选择产品要求" disabled />
							<i></i>
						</view>
					</picker>
				</view>
			</view>
			<view class="main_top">
				<view class="main_item">
					<h1>意向价格：</h1>
					<view class="main_info">
						<input placeholder-class="placeholder-class" type="digit" @input="handleChange" :value="form.goodsPrice"
						 placeholder="输入 0 价格为面议" />
						<picker @change="onSelect" mode="multiSelector" range-key="name" :value="show" :range="actions">
							<view class="main_sel">
								<span>{{ showName }}</span>
								<em></em>
							</view>
						</picker>
					</view>
				</view>
				<view class="main_item">
					<h1>采购数量：</h1>
					<view class="main_info">
						<input placeholder-class="placeholder-class" type="digit" @input="handleChange1" v-model="form.goodsAmount"
						 placeholder="请输入产品可采购数量" />
					</view>
					<span>{{showName.split('/')[1]}}</span>
				</view>
				<view class="main_item">
					<h1>产地要求：</h1>
					<picker @change="onConfirm2" mode="selector" :value="place" :range="countryList">
						<view class="main_info">
							<input placeholder-class="placeholder-class" type="text" v-model="form.origin" placeholder="请选择产地要求" @click="place = true"
							 disabled />
							<i></i>
						</view>
					</picker>
				</view>

				<view class="main_item">
					<h1>收货地区：</h1>
					<picker @change="onConfirm" mode="multiSelector" @columnchange="handleColumnchange1" range-key="label" :value="addr"
					 :range="addrList">
						<view class="main_info">
							<input placeholder-class="placeholder-class" type="text" v-model="addrName.join(',')" placeholder="请选择收货地区"
							 disabled />
							<i></i>
						</view>
					</picker>
				</view>
				<view class="main_item">
					<h1>联系电话：</h1>
					<view class="main_info">
						<input placeholder-class="placeholder-class" type="text" v-model="form.contactsPhone" placeholder="请输入联系电话" />
					</view>
				</view>
			</view>
			<view class="main_bottom">
				<textarea placeholder-class="placeholder-class" v-model="form.details" placeholder="请输入采购描述" maxlength="300"></textarea>
				<view class="span">字数限制300字以内</view>
			</view>
		</view>

		<view class="btn" @click="getSaveDate">
			<button>立即发布</button>
		</view>
		<view class="popup" v-if="showDialog1&&userInfo.shopCompany.examineType==0||showDialog1&&userInfo.shopCompany.examineType==1" @click="close1">
			<view class="content">
				<p class="p1 pd fs_32">尊敬的客户：</p>
				<p class="p2 pd">您的发布采购信息，已经同步到采购大厅。</p>
				<p class="p3 pd">
					如有疑问，请拨打
					<span class="fs_28 fw_600">4000-666-591</span>
				</p>
				<p class="p4 pd fs_28">
					<span class="fw_600">{{ seconds1 }}s</span>后自动关闭
				</p>
				<view class="confirm" @click.stop="close1">确定</view>
			</view>
		</view>
		<ident v-if="showDialog1&&userInfo.shopCompany.examineType!=0&&userInfo.shopCompany.examineType!=1"/>
	</view>
</template>
<script>
	import {
		saveSupplyDemand,
		getAreaByParentId,
		findCountryList,
		saveGuideOperate
	} from "@/api/shop/index.js";
	import h5_header from '@/components/h5_header.vue'
	import ident from '@/components/ident.vue'
	export default {
		components: {
			h5_header,
			ident
		},
		data() {
			return {
				show: false,
				actions: [
					[{
							name: "元/吨 ",
							id: "0"
						},
						{
							name: "元/千克",
							id: "1"
						},
						// {
						// 	name: "美元/吨 ",
						// 	id: "2"
						// },
						// {
						// 	name: "美元/千克 ",
						// 	id: "3"
						// },
					]
				],
				categoryList: ["猪", "牛", "羊", "鱼", "虾", "蟹", "禽", "其他"],
				categoryStu: '',
				typeList: [
					[{
							name: "现货",
							id: "0"
						},
						{
							name: "期货",
							id: "1"
						},
						{
							name: "不限",
							id: "-1"
						},
					]
				],
				typeShow: false,
				typeName: "",
				showName: "",
				priceShow: false,
				showDialog1: false,
				seconds1: 60,
				amountShow: false,
				place: false,
				countryList: ["国内", "国外", "不限"],
				form: {
					cityId: "",
					cityName: "",
					companyId: "",
					companyName: "",
					contactsPhone: "",
					details: "",
					goodsAmount: "",
					goodsCategory: "",
					goodsPrice: "",
					goodsType: "",
					images: "",
					origin: "",
					priceType: "",
					provinceId: "",
					provinceName: "",
					title: "",
					type: 1,
					userId: "",
				},
				imgArr: [],
				addrId: [],
				addrName: [],
				addrStu: false,
				addrList: [],
				release_stu: "2",
				userInfo:""
			};
		},
		onLoad(option) {

			this.showName =
				this.showName == "" ? this.actions[0][0].name : this.showName;
			this.form.priceType =
				this.form.priceType == "" ?
				this.actions[0][0].id :
				this.form.priceType;
			this.getAreaByParentId();
			// this.findCountryList();
			this.form.contactsPhone = JSON.parse(uni.getStorageSync("userInfo")).user.mobile
			this.release_stu = option.release_stu || "2"
			this.userInfo = JSON.parse(uni.getStorageSync("userInfo"))
		},
		methods: {
			onSelect(e) {
				this.showName = this.actions[0][e.detail.value[0]].name;
				this.form.priceType = this.actions[0][e.detail.value[0]].id;
			},
			onSelect1(e) {
				this.typeName = this.typeList[0][e.detail.value[0]].name;
				this.form.goodsType = this.typeList[0][e.detail.value[0]].id;
			},

			handleColumnchange(column) {
				if (column.detail.column == 0) {

					// #ifdef H5
					this.countryList[1] = this.countryList[0][column.detail.value].children || []
					// #endif
					// #ifdef !H5
					this.$set(this.countryList, 1, this.countryList[0][column.detail.value].children || [])
					// #endif
				}
			},
			handleColumnchange1(column) {
				if (column.detail.column == 0) {
					// #ifdef H5
					this.addrList[1] = this.addrList[0][column.detail.value].children || []
					// #endif
					// #ifdef !H5
					this.$set(this.addrList, 1, this.addrList[0][column.detail.value].children || [])
					// #endif

				}
			},
			findCountryList() {
				findCountryList().then((res) => {
					if (res.code === 0) {
						this.countryList = [
							res.data,
							res.data[0].children
						]
					}
				});
			},
			getAreaByParentId() {
				getAreaByParentId().then((res) => {
					if (res.code === 0) {
						this.addrList = [
							res.data,
							res.data[0].children,
						]
					}
				});
			},
			handleChange(e) {
				if (e.detail.value.indexOf(".") < 0 && e.detail.value != "") {
					if (e.detail.value.length > 2) {} else {
						e.detail.value = parseFloat(e.detail.value);
					}
				} else if (e.detail.value.indexOf(".") == 0) {
					e.detail.value = e.detail.value.replace(/[^$#$]/g, "0.");
					e.detail.value = e.detail.value.replace(/\.{2,}/g, ".");
				} else if (!(/^(\d?)+(\.\d{0,2})?$/.test(e.detail.value))) {
					//去掉最后一位
					e.detail.value = Math.floor(parseFloat(e.detail.value) * 100) / 100
				}
				this.$nextTick(() => {
					this.form.goodsPrice = e.detail.value
				})
			},
			handleChange1(e) {
				if (e.detail.value.indexOf(".") < 0 && e.detail.value != "") {
					if (e.detail.value.length > 2) {} else {
						e.detail.value = parseFloat(e.detail.value);
					}
				} else if (e.detail.value.indexOf(".") == 0) {
					e.detail.value = e.detail.value.replace(/[^$#$]/g, "0.");
					e.detail.value = e.detail.value.replace(/\.{2,}/g, ".");
				} else if (!(/^(\d?)+(\.\d{0,2})?$/.test(e.detail.value))) {
					//去掉最后一位
					e.detail.value = Math.floor(parseFloat(e.detail.value) * 100) / 100
				}
				this.$nextTick(() => {
					this.form.goodsAmount = e.detail.value
				})
			},
			onConfirm(event) {
				this.addrId = [
					this.addrList[0][event.detail.value[0]].value,
					this.addrList[1][event.detail.value[1]].value,
				];
				this.addrName = [
					this.addrList[0][event.detail.value[0]].label,
					this.addrList[1][event.detail.value[1]].label,
				];
			},
			onConfirm1(e) {
				this.form.goodsCategory = this.categoryList[e.detail.value];
			},
			onConfirm2(event) {
				console.log(event)
				this.form.origin = this.countryList[event.detail.value];
			},
			getSaveDate() {
				if (!this.form.title) {
					uni.showToast({
						title: '请输入产品产品名称',
						icon: 'none'
					})
					return;
				}
				if (!this.form.goodsCategory) {
					uni.showToast({
						title: '请选择产品分类',
						icon: 'none'
					})
					return;
				}
				if (!this.form.goodsType) {
					uni.showToast({
						title: '请选择产品要求',
						icon: 'none'
					})
					return;
				}
				if (this.form.goodsPrice !== 0) {
					if (!this.form.goodsPrice) {
						uni.showToast({
							title: '请输入产品意向价格',
							icon: 'none'
						})
						return;
					}
				}
				if (!this.form.goodsAmount) {
					uni.showToast({
						title: '请输入产品采购数量',
						icon: 'none'
					})
					return;
				}
				if (!this.form.origin) {
					uni.showToast({
						title: '请选择产地要求',
						icon: 'none'
					})
					return;
				}

				if (this.addrName.length === 0) {
					uni.showToast({
						title: '请选择收货地区',
						icon: 'none'
					})
					return;
				}
				if (!this.form.contactsPhone) {
					uni.showToast({
						title: '请输入联系电话',
						icon: 'none'
					})
					return;
				}
				if (!/^1[3456789]\d{9}$/.test(this.form.contactsPhone)) {
					uni.showToast({
						title: '联系电话格式错误',
						icon: 'none'
					})
					return;
				}

				this.form.images = this.imgArr.join(",");
				this.form.provinceName = this.addrName[0];
				this.form.cityName = this.addrName[1];
				this.form.provinceId = this.addrId[0];
				this.form.cityId = this.addrId[1];
				this.form.userId = uni.getStorageSync('userId');
				this.form.companyId = JSON.parse(uni.getStorageSync('userInfo')).shopCompany.id;
				this.form.companyName = JSON.parse(uni.getStorageSync('userInfo')).shopCompany.comName;
				saveSupplyDemand(this.form).then((res) => {
					if (res.code === 0) {
						this.showDialog1 = true;
						this.open2()
					}
				});
				if (this.release_stu == '1') {
					saveGuideOperate({
						userId: uni.getStorageSync("userId"),
						type: "110"
					})
				}
			},
			open2() {
				this.seconds1 = 60;
				this.timer = setInterval(() => {
					this.seconds1--;
					if (this.seconds1 == 0) {
						this.reset1();
					}
				}, 1000);
			},
			close1() {
				this.reset1();
			},
			reset1() {
				this.showDialog1 = false;
				clearInterval(this.timer);
				this.timer = null;
				var pages = getCurrentPages();
				var prevPage = pages[pages.length - 2];
				prevPage.$vm.isLoad = 2;
				this.$handleOpenUrl('', 2)
			},
		},
	};
</script>
<style scoped lang="scss">
	.supplyRelease {
		width: 100%;
		min-height: 100%;
		background: #f7f9fe;
		padding-bottom: 100upx;

		.main {
			padding: 16upx 30upx;

			.main_top {
				margin-bottom: 8upx;

				.main_item {
					padding: 0 25upx;
					display: flex;
					height: 80upx;
					align-items: center;
					background: #fff;
					margin-bottom: 1upx;

					picker {
						width: 100%;
					}

					h1 {
						font-size: 26upx;
						color: #333333;
						white-space: nowrap;
					}

					.main_info {
						flex: 1;
						display: flex;
						height: 100%;
						align-items: center;

						input {
							width: 100%;
							height: 100%;
							font-size: 24upx;
						}

						/deep/ .placeholder-class {
							font-size: 24upx;
							color: #999999;
						}

						i {
							width: 10upx;
							height: 19upx;
							display: inline-block;
							background: url("https://oss-shop.cciinet.com/files/MiniProgram/gengduo@2x.png") no-repeat;
							background-size: 100% 100%;
						}

						.main_sel {
							background: #f7f9fe;
							border-radius: 16upx;
							display: flex;
							align-items: center;
							justify-content: center;
							padding: 5upx 10upx 5upx 25upx;

							span {
								color: #ea5520;
								white-space: nowrap;
							}

							em {
								display: inline-block;
								width: 19upx;
								height: 10upx;
								background: url("https://oss-shop.cciinet.com/files/MiniProgram/bottom.png") no-repeat;
								background-size: 100% 100%;
								margin-left: 14upx;
							}
						}
					}
				}
			}

			.main_bottom {
				height: 180upx;
				background: #ffffff;
				border-radius: 8upx;

				textarea {
					height: 120upx;
					padding: 25upx;
					font-size: 24upx;
					resize: none;
				}

				/deep/ .placeholder-class {
					font-size: 24upx;
					color: #999999;
				}

				.span {
					text-align: right;
					font-size: 20upx;
					color: #999999;
					margin-right: 50upx;
					margin-top: -20upx;
				}
			}

			.main_upload {
				height: auto;
				background: #fff;
				margin-top: 2upx;
				display: flex;
				flex-wrap: wrap;
				padding-top: 22upx;
				padding-left: 22upx;
				padding-bottom: 20upx;

				.card-upload {
					width: 140upx;
					height: 140upx;
					background: #F7F9FE;
					border-radius: 8upx;
					display: flex;
					justify-content: center;
					align-items: center;

					image {
						width: 80upx;
						height: 80upx;
					}
				}

				.img_preview {
					width: 140upx;
					height: 140upx;
					position: relative;
					margin-right: 30upx;
					margin-bottom: 45upx;

					img {
						width: 140upx;
						height: 140upx;
					}

					i {
						width: 29upx;
						height: 29upx;
						display: inline-block;
						background: url("https://oss-shop.cciinet.com/files/MiniProgram/delete_icon.png") no-repeat;
						background-size: 100% 100%;
						position: absolute;
						right: -14upx;
						top: -14upx;
					}
				}

				.img_preview:nth-child(4n) {
					margin-right: 0;
				}
			}
		}

		.btn {
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 98upx;
			background: #ffffff;
			box-shadow: 0upx 21upx 8upx 0upx rgba(3, 15, 52, 0.1);
			display: flex;
			align-items: center;
			justify-content: center;

			button {
				width: 320upx;
				height: 72upx;
				background: linear-gradient(-13deg, #218eed, #035abe);
				border-radius: 36upx;
				text-align: center;
				line-height: 72upx;
				font-size: 32upx;
				color: #ffffff;
			}
		}
	}

	.supplyRelease>.popup {

		width: 100%;
		height: 100%;
		position: fixed;
		z-index: 999999999999;
		top: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: rgba(0, 0, 0, .5);

		.content {
			border-radius: 8upx;
			width: 690upx;
			height: 500upx;
			// padding: 50upx 20upx;
			background-color: #fff;

			.pd {
				padding: 15upx;
				color: #343434;
			}

			.p3 {
				color: #343434;

				span {
					color: #00428e;
				}
			}

			.p4 {
				text-align: center;
				color: #343434;

				span {
					color: #ea5620;
				}
			}

			.confirm {
				margin: 35upx auto 0;
				width: 500upx;
				height: 88upx;
				line-height: 88upx;
				border: 2upx solid #00428e;
				color: #00428e;
				border-radius: 42upx;
				text-align: center;
			}
		}
	}
</style>
